<template>
	<view class="wrap">
		<!-- <u-swiper :list="swiperList" name="img_url" height="320"></u-swiper> -->
		<view class="u-demo-area u-p-t-10">
			<u-toast ref="uToast"></u-toast>
			
			<u-search v-model="value" placeholder="请输入文章标题" @change="change" @custom="search" @search="search" :shape="shape" :clearabled="clearabled" 
			:show-action="showAction" :input-align="inputAlign" @clear="clear" bg-color="#FFFFFF"></u-search>
		</view>
<!-- 		<view class="u-p-t-10">
			<u-tabs :list="tabsList" :is-scroll="false" :current="current" @change="change" bg-color="#F0F0F0"></u-tabs>
		</view> -->
		
		<view v-if="flowList.length">
			<u-row gutter="16" class="u-skeleton">
				<u-col span="12" v-for="article in flowList">
					<article-card :article="article"></article-card>
				</u-col>
			
			</u-row>
			<view v-if="flowList.length%10 == 0" class="u-p-b-30">
				<u-loadmore  :status="loadStatus" />
			</view>
			<view v-else class="u-p-b-30">
				<u-loadmore  status="nomore" />
			</view>
		</view>
		<view class="empty" v-else>
			<u-empty text="没有您要的文章哟" mode="search"></u-empty>
		</view>
		<u-back-top class="u-back-top" :scroll-top="scrollTop" top="600" icon="arrow-up" tips="返回" ></u-back-top>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentPageNum: 1,
				loadStatus: 'loadmore',
				flowList: [],
				list: [],
				value: '',
				shape: 'round',
				clearabled: true,
				showAction: true,
				inputAlign: 'center',
				tabsList: [{
					name: '最新'
				}, {
					name: '最火'
				}],
				current: 0,
				totalPage:0,
				scrollTop: 0
			}
		},
		onLoad() {
			
			this.addArticleData();
			
			
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			if(this.currentPageNum+1 > this.totalPage){
				this.loadStatus = 'nomore';
			}else{
				this.loadStatus = 'loading';
				
				this.currentPageNum++
				
				// 模拟数据加载
				setTimeout(() => {
					this.addArticleData()
				}, 1000)
			}
			
		},
		methods: {
			change(index) {
				// 获取用户 筛选选项   从 最新  最火 中筛选  0 == 最新   1 == 最火
				this.current = index;
			},
			
			async search() {
				
				this.flowList = []
				const params = {
					keyword : this.value,
					pageNum : 1
				}
				
				const res = await this.$u.api.article(params)
				
				if(res.list.length > 0){
					this.$refs.uToast.show({// 用户回车搜索触发
						
						title: '为您筛选出：' + this.value,
						type: 'success'
					})
					this.flowList.push(...res.list)
				}else{
					this.$refs.uToast.show({// 用户回车搜索触发
						
						title: '未查询到该文章',
						type: 'error'
					})
				}
				
			},
			clear() {//清除
				this.flowList = []
				this.value = '',
				this.currentPageNum = 1
				this.addArticleData()
				
			},
			
			async addArticleData() {
				
				// 通过页码获取文章列表
				const params = {
					keyword : this.value,
					pageNum : this.currentPageNum
				}
				const res = await this.$u.api.article(params)
				
				this.totalPage = res.totalPage
				if(res.list.length > 0){
					
					//如果获取的列表大于0 就将获取的数据添加在数组的末尾
					this.flowList.push(...res.list)
					this.loadStatus = 'loadmore'
				}else{
					
					this.loadStatus = 'nomore'
				}
				
			},

		}
	}
</script>

<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background-color: rgb(240, 240, 240);
	}
</style>

<style lang="scss" scoped>

	.u-back-top {
		height: 7vh;
	}
	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
	}
	
	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}
	
	.demo-image {
		width: 100%;
		border-radius: 4px;
	}
	
	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;
	}
	
	.demo-tag {
		display: flex;
		margin-top: 5px;
	}
	
	.demo-tag-owner {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}
	
	.demo-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}
	
	.demo-detial {
		font-size: 25rpx;
		color: #C0C4CC;
		margin-top: 35rpx;
	}
	
	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 10rpx;
	}
	.empty {
		height: 80vh;
	}
</style>